<template>
	<view class="tab dis">

		<view class="tab-msg" :class="tabIndex==index?'tabActive':''" v-for="(item,index) in manuList"
			@click="manuBtn(index,item)">
			<view class="tab-msg1">

				<text v-if="item.tit!='价格'">{{item.tit}}</text>
			</view>
			<view class="tab-msg2">
				<picker v-if="item.tit=='价格'" class="my-picker" @change="bindPickerChange" :value="priceIndex"
					:range="array">
					{{array[priceIndex]||'价格'}}
				</picker>
				<image v-if="item.tit=='价格'" src="@/static/com/icon_zk.png" mode=""></image>
			</view>


		</view>
		<view class="dis">


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['由高到低', '由低到高'],
				priceIndex: "",
				tabIndex: 0,
				manuList: [{
						tit: '销量'
					},
					{
						tit: '人气'
					},
					{
						tit: '价格'
					}
				],
			}
		},
		methods: {
			bindPickerChange(e) {
				this.priceIndex = e.detail.value
				let data = {
					salesOrder: '',
					popularityorder: '',
					priceOrder: '',
				}


				if (this.priceIndex == 1) {
					data.priceOrder = "ASC"
				} else {
					data.priceOrder = "DES"
				}
				this.$emit('bindPickerChange', data)

			},
			manuBtn(index, item) {
				this.tabIndex = index
				let data = {
					salesOrder: '',
					popularityorder: '',
					priceOrder: '',
				}
				if (this.tabIndex == 0) {
					data.salesOrder = 'DES'
				} else if (this.tabIndex == 1) {
					data.popularityorder = 'DES'
				} else if (this.tabIndex == 2) {
					data.priceOrder = "DES"
				}


				if (this.tabIndex != 2) {
					this.priceIndex = ''
				}
				this.$emit('manuBtn', data)
				// this.getProductList()


			},
		}
	}
</script>

<style lang="scss" scoped>
	// .uni-picker-action-confirm {
	// 	color: blue !important;
	// }

	// uni-picker .uni-picker-action.uni-picker-action-confirm {
	// 	color: red !important;
	// }


	.tab {
		width: 100%;
		height: 88rpx;
		justify-content: space-between;
		padding: 0 40rpx;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;

		}

		.tab-msg {
			.tab-msg1 {


				text-align: center;
			}

			.tab-msg2 {
				display: flex;
				align-items: center;
			}

			height: 100%;
			line-height: 88rpx;
			display: flex;
			align-items: center;
			position: relative;

			.line {
				position: absolute;
				bottom: 8rpx;
				left: -10rpx;
				height: 6rpx;
				width: 28rpx;
				background: $maincolor;
			}
		}
	}

	.tabActive {
		border-bottom: 4rpx solid $maincolor;
		color: $maincolor !important;
	}
</style>